<template>
  <a-card :bordered="false" class="br-10">
    <div class="table-page-search">
      <a-form>
        <a-form-item label="关键词:" style="width: 350px;">
          <a-input v-model="queryParam.keyWord" placeholder="输入活动名称/发布单位/联系人" allowClear />
        </a-form-item>
        <a-form-item label="活动状态:">
          <a-select v-model="queryParam.activityStatus" placeholder="请选择状态" allowClear style="width: 150px;">
            <template v-for="(item,i) in activityStateDict">
              <a-select-option v-if="item.dictValue <= 6" :key="i" :value="item.dictValue">
                {{item.dictLabel}}
              </a-select-option>
            </template>
          </a-select>
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="handleSearch">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </span>
      </a-form>
    </div>
  
    <a-radio-group v-model="status" :style="{ marginTop: '8px' }" @change="handleSearch">
      <a-radio-button v-for="(item,index) in statusOptions" :key="index" :value="item.value">
        {{ item.label }}
      </a-radio-button>
    </a-radio-group>
    <s-table size="default" ref="table" :rowSelection="null" :columns="columns" :data="loadData">
      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
      </span>
  
      <!-- 发布状态 -->
      <span slot="publishStatus" slot-scope="text">
        <DictTag :options="Dict.getLocal('publishStatusDict')" :value="text" isText />
      </span>
      <!-- 审核状态(0:待审核;1:审核通过(已合作);2:审核不通过;3:搁置;4:已失效)', -->
      <span slot="reviewStatus" slot-scope="text, record">
        <template v-if="record.reviewStatus === 0">
          <a-tag v-if="record.shelveFlag === 1">已搁置</a-tag>
          <a-tag v-else color="orange">待审核</a-tag>
        </template>
        <a-tag v-else-if="record.reviewStatus === 1" color="blue">已通过</a-tag>
        <a-tag v-else color="red">已失效</a-tag>
      </span>
      <!-- 活动状态 -->
      <span slot="activityStatus" slot-scope="text">
        <DictTag :options="Dict.getLocal('activityStateDict')" :value="String(text)" isBadge />
      </span>
      <!-- 活动时间 -->
      <span slot="activityTime" slot-scope="text, record">
        {{ record.startTime }} ~ {{record.endTime}}
      </span>
      <!-- 活动报名时间 -->
      <span slot="activityEnrollTime" slot-scope="text, record">
        {{ record.enrollStartTime }} ~ {{record.enrollEndTime}}
      </span>
      <!-- 发起方联系人 -->
      <span slot="userInfo" slot-scope="text, record">
        <div>{{ record.name }}</div>
        <div>{{ record.phone }}</div>
      </span>
  
      <div slot="action" slot-scope="text, record" class="disFlxAC ">
        <a-button type="link" size="small" class="_mr-5" @click="openCodeModal(record)"> 预览详情 </a-button>
        <a-button v-if="record.reviewStatus === 0" type="link" size="small" class="_mr-5" @click="openModal(record,false)"
          style="color:#EA5E0E">
          审核
        </a-button>
        <a-button v-if="record.reviewStatus === 1" type="link" size="small" class="_mr-5" @click="openModal(record,true)">
          合作详情
        </a-button>
      </div>
    </s-table>
  
    <AuditModal ref="AuditModal" @refresh="handleSearch" />
    <ActivityCode ref="ActivityCode" />
  </a-card>
</template>

<script>
import { activityPartnerApList } from '@/api/activity/activity'
import { STable } from '@/components'
import DictTag from '@/components/DictTag'
import AuditModal from './auditModal'
import ActivityCode from './activityCode'

export default {
  components: {
    STable,
    DictTag,
    AuditModal,
    ActivityCode
  },
  computed: {
    activityStateDict() {
      return this.Dict.getLocal('activityStateDict')
    }
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 10
      },
      // 查询参数
      status: "",
      queryParam: {
        keyWord: undefined,
        activityStatus: undefined,
        partnerReviewStatus: "",
        shelveFlag: undefined // 1已搁置
      },
      // 活动表单
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: 100,
        },
        {
          title: '活动名称',
          dataIndex: 'title',
          width: 200,
          ellipsis: true
        },
        {
          title: '发布单位',
          dataIndex: 'sourceOrgName',
          width: 200,
          ellipsis: true
        },
        {
          title: '发布状态',
          dataIndex: 'publishStatus',
          scopedSlots: { customRender: 'publishStatus' },
          width: 150,
        },
        {
          title: '审核状态',
          dataIndex: 'reviewStatus',
          scopedSlots: { customRender: 'reviewStatus' },
          width: 150,
        },
        {
          title: '活动状态',
          dataIndex: 'activityStatus',
          scopedSlots: { customRender: 'activityStatus' },
          width: 150,
        },
        {
          title: '活动时间',
          scopedSlots: { customRender: 'activityTime' },
          width: 160,
        },
        {
          title: '报名时间',
          scopedSlots: { customRender: 'activityEnrollTime' },
          width: 160,
        },
        {
          title: '已报名人数',
          dataIndex: 'registerSuccessNum',
          width: 200,
        },
        {
          title: '发起方联系人',
          scopedSlots: { customRender: 'userInfo' },
          width: 200,
        },
        {
          title: '操作',
          width: 130,
          fixed: 'right',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        this.queryParam.shelveFlag = this.status === 2 ? 1 : undefined;
        this.queryParam.partnerReviewStatus = this.status === 2 ? "" : this.status;
        return activityPartnerApList(Object.assign(parameter, this.queryParam))
      },
      statusOptions: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '待审核',
          value: 10,
        },
        {
          label: '已合作',
          value: 1,
        },
        {
          label: '已搁置',
          value: 2,
        },
        {
          label: '已失效',
          value: 4,
        }
      ]
    }
  },
  created() { },
  methods: {
    handleSearch() {
      this.$refs.table.refresh(true)
    },
    handleReset() {
      Object.assign(this.$data.queryParam, this.$options.data().queryParam);
      this.$refs.table.refresh(true)
    },
    openModal(row, disabled) {
      this.$refs.AuditModal.openModal(row, disabled)
    },
    openCodeModal(row) {
      this.$router.push({
        name: 'activityDetailsPreview',
        query: {
          activityId: row.outActivityId,
          partnerReviewRecordId: row.id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>